<!DOCTYPE html>



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">


  
  
    
    
  <script src="/lib/pace/pace.min.js?v=1.0.2"></script>
  <link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.ico?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon.ico?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="html,css,js," />










<meta name="description" content="前端基础知识 邹曜 D9实验室  目录   基本语言（html + css + JavaScript + jquery（js库）） 框架（css框架bootstrap js框架angularjs） js设计模式 编码规范 开源社区  基本语言结构(html)+表现(css)+行为(javascript)  html css  标签:输入框，标题，段落，图片，列表，链接，表格">
<meta name="keywords" content="html,css,js">
<meta property="og:type" content="article">
<meta property="og:title" content="frontEndBaseKnowledge">
<meta property="og:url" content="http://tomasyao.gitee.info/2017/12/15/frontEndBaseKnowledge/index.html">
<meta property="og:site_name" content="Tomasyao">
<meta property="og:description" content="前端基础知识 邹曜 D9实验室  目录   基本语言（html + css + JavaScript + jquery（js库）） 框架（css框架bootstrap js框架angularjs） js设计模式 编码规范 开源社区  基本语言结构(html)+表现(css)+行为(javascript)  html css  标签:输入框，标题，段落，图片，列表，链接，表格">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_049.png">
<meta property="og:image" content="http://pic.tomasyao.info/17-10-24-18:47springfirst.jpg">
<meta property="og:image" content="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_056.png">
<meta property="og:image" content="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_057.png">
<meta property="og:image" content="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_050.png">
<meta property="og:image" content="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_051.png">
<meta property="og:image" content="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_053.png">
<meta property="og:image" content="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_054.png">
<meta property="og:image" content="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_055.png">
<meta property="og:image" content="http://pic.tomasyao.info/thanks.jpg">
<meta property="og:updated_time" content="2018-11-30T04:02:41.020Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="frontEndBaseKnowledge">
<meta name="twitter:description" content="前端基础知识 邹曜 D9实验室  目录   基本语言（html + css + JavaScript + jquery（js库）） 框架（css框架bootstrap js框架angularjs） js设计模式 编码规范 开源社区  基本语言结构(html)+表现(css)+行为(javascript)  html css  标签:输入框，标题，段落，图片，列表，链接，表格">
<meta name="twitter:image" content="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_049.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    version: '5.1.4',
    sidebar: {"position":"left","display":"hide","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://tomasyao.gitee.info/2017/12/15/frontEndBaseKnowledge/"/>





  <title>frontEndBaseKnowledge | Tomasyao</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before">
          <i style="background:rgba(204,163,81,0.8);height:2px;"></i>
        </span>
        <span class="site-title">Tomasyao</span>
        <span class="logo-line-after">
          <i style="background:rgba(204,163,81,0.8);height:2px;"></i>
        </span>
      </a>
    </div>
      
        <p class="site-subtitle">与世界分享我刚编的故事</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-commonweal">
          <a href="/404.html" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-heartbeat"></i> <br />
            
            公益404
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://tomasyao.gitee.info/2017/12/15/frontEndBaseKnowledge/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="tomasyao">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://pic.tomasyao.info/avatar.png">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Tomasyao">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">frontEndBaseKnowledge</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-12-15T09:56:23+08:00">
                2017-12-15
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  2,823
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  14
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
<script src="https://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

<blockquote>
<p>前端基础知识 <em><code>邹曜 D9实验室</code></em></p>
</blockquote>
<h1 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h1><hr>

<ul>
<li>基本语言（html + css + JavaScript + jquery（js库））</li>
<li>框架（css框架bootstrap js框架angularjs）</li>
<li>js设计模式</li>
<li>编码规范</li>
<li>开源社区</li>
</ul>
<h1 id="基本语言"><a href="#基本语言" class="headerlink" title="基本语言"></a>基本语言</h1><p><hr><br><em>结构(html)+表现(css)+行为(javascript)</em></p>
<blockquote>
<p>html css</p>
</blockquote>
<p><strong>标签:输入框，标题，段落，图片，列表，链接，表格</strong></p>
<a id="more"></a>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;input <span class="built_in">type</span>=<span class="string">"text"</span> name=<span class="string">""</span> value=<span class="string">"name"</span> placeholder=<span class="string">"请输入name"</span>/&gt;</div></pre></td></tr></table></figure>
<p><input type="text" name="" value="name" placeholder="请输入name"><br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">&lt;h1&gt;h1标题&lt;/h1&gt;</div><div class="line">&lt;h2&gt;h2标题&lt;/h2&gt;</div><div class="line">&lt;h3&gt;h3标题&lt;/h3&gt;</div><div class="line">&lt;h4&gt;h4标题&lt;/h4&gt;</div><div class="line">&lt;h5&gt;h5标题&lt;/h5&gt;</div><div class="line">&lt;h6&gt;h6标题&lt;/h6&gt;</div></pre></td></tr></table></figure></p>
<p><img src="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_049.png" alt=""><br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;p&gt;我是第一段落,网址www.divcss5.com ；&lt;/p&gt;</div><div class="line">&lt;p&gt;我是第二段落；&lt;/p&gt;</div><div class="line">&lt;p&gt;我是第三段落，&lt;br /&gt;我被br换行。&lt;/p&gt;</div></pre></td></tr></table></figure></p>
<p></p><p>我是第一段落,网址www.divcss5.com ；</p><p></p>
<p></p><p>我是第二段落；</p><p></p>
<p></p><p>我是第三段落，<br>我被br换行。</p><br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;img src=<span class="string">"http://pic.tomasyao.info/17-10-24-18:47springfirst.jpg"</span> style=<span class="string">"max-height: 200px;"</span>/&gt;</div></pre></td></tr></table></figure><p></p>
<p><img src="http://pic.tomasyao.info/17-10-24-18:47springfirst.jpg" style="max-height: 200px;"><br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">&lt;ul&gt;</div><div class="line">    &lt;li&gt;苹果&lt;/li&gt;</div><div class="line">    &lt;li&gt;香蕉&lt;/li&gt;</div><div class="line">    &lt;li&gt;西瓜&lt;/li&gt;</div><div class="line">&lt;/ul&gt;</div></pre></td></tr></table></figure></p>
<p><ul><br>    <li>苹果</li><br>    <li>香蕉</li><br>    <li>西瓜</li><br></ul><br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">&lt;ol&gt;</div><div class="line">    &lt;li&gt;苹果&lt;/li&gt;</div><div class="line">    &lt;li&gt;香蕉&lt;/li&gt;</div><div class="line">    &lt;li&gt;西瓜&lt;/li&gt;</div><div class="line">&lt;/ol&gt;</div></pre></td></tr></table></figure></p>
<p><ol><br>    <li>苹果</li><br>    <li>香蕉</li><br>    <li>西瓜</li><br></ol><br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;a href=<span class="string">"http://tomasyao.gitee.io/navigation/"</span>&gt;点击跳转&lt;/a&gt;</div></pre></td></tr></table></figure></p>
<p><a href="http://tomasyao.gitee.io/navigation/" target="_blank" rel="external">点击跳转</a><br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">&lt;table class=<span class="string">"table table-bordered table-stripped table-hover"</span>&gt;</div><div class="line">  &lt;thead&gt;</div><div class="line">      &lt;th&gt;姓名&lt;/th&gt;&lt;th&gt;部门&lt;/th&gt;&lt;th&gt;月份&lt;/th&gt;&lt;th&gt;工资&lt;/th&gt;&lt;th&gt;时间&lt;/th&gt;</div><div class="line">  &lt;/thead&gt;</div><div class="line">  &lt;tbody&gt;</div><div class="line">      &lt;tr&gt;&lt;td&gt;张三&lt;/td&gt;&lt;td&gt;人事部&lt;/td&gt;&lt;td&gt;January&lt;/td&gt;&lt;td&gt;<span class="variable">$100</span>&lt;/td&gt;&lt;td&gt;2017-12-11&lt;/td&gt;&lt;/tr&gt;</div><div class="line">      &lt;tr&gt;&lt;td&gt;李四&lt;/td&gt;&lt;td&gt;宣传部&lt;/td&gt;&lt;td&gt;January&lt;/td&gt;&lt;td&gt;<span class="variable">$200</span>&lt;/td&gt;&lt;td&gt;2017-12-11&lt;/td&gt;&lt;/tr&gt;</div><div class="line">      &lt;tr&gt;&lt;td&gt;王五&lt;/td&gt;&lt;td&gt;营销部&lt;/td&gt;&lt;td&gt;January&lt;/td&gt;&lt;td&gt;<span class="variable">$300</span>&lt;/td&gt;&lt;td&gt;2017-12-11&lt;/td&gt;&lt;/tr&gt;</div><div class="line">  &lt;/tbody&gt;</div><div class="line">&lt;/table&gt;</div></pre></td></tr></table></figure></p>
<div style="max-height: 200px;text-align: center;"><br><img src="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_056.png" alt=""><br></div>

<p><strong>div+css盒子模型</strong></p>
<p>CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。</p>
<div style="text-align: center;"><br><img src="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_057.png" alt="no"><br></div>

<p><strong>浮动,style属性,class属性,css</strong><br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">&lt;style <span class="built_in">type</span>=<span class="string">"text/css"</span>&gt;</div><div class="line">    body &#123;</div><div class="line">        background-color: red</div><div class="line">    &#125;</div><div class="line">    p &#123;</div><div class="line">        margin-left: 20px</div><div class="line">    &#125;</div><div class="line">&lt;/style&gt;</div></pre></td></tr></table></figure></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">&lt;div style=<span class="string">"width: 300px;height: 200px;background-color: blue;"</span>&gt;</div><div class="line">        &lt;div style=<span class="string">"width: 100px;height: 100px;background-color: green;"</span>&gt;&lt;/div&gt;</div><div class="line">        &lt;div style=<span class="string">"width: 110px;height: 110px;background-color: red;"</span>&gt;&lt;/div&gt;</div><div class="line">&lt;/div&gt;</div><div class="line">&lt;hr&gt;</div><div class="line">&lt;div style=<span class="string">"width: 300px;height: 200px;background-color: blue;"</span>&gt;</div><div class="line">    &lt;div style=<span class="string">"width: 100px;height: 100px;background-color: green;float: left;"</span>&gt;&lt;/div&gt;</div><div class="line">    &lt;div style=<span class="string">"width: 110px;height: 110px;background-color: red;"</span>&gt;&lt;/div&gt;</div><div class="line">&lt;/div&gt;</div><div class="line">&lt;hr&gt;</div><div class="line">&lt;div style=<span class="string">"width: 300px;height: 200px;background-color: blue;"</span>&gt;</div><div class="line">    &lt;div style=<span class="string">"width: 100px;height: 100px;background-color: green;float: left;"</span>&gt;&lt;/div&gt;</div><div class="line">    &lt;div style=<span class="string">"width: 110px;height: 110px;background-color: red;float: left;"</span>&gt;&lt;/div&gt;</div><div class="line">&lt;/div&gt;</div><div class="line">&lt;hr&gt;</div><div class="line">&lt;div style=<span class="string">"width: 300px;height: 200px;background-color: blue;"</span>&gt;</div><div class="line">    &lt;div style=<span class="string">"width: 100px;height: 100px;background-color: green;float: left;"</span>&gt;&lt;/div&gt;</div><div class="line">    &lt;div style=<span class="string">"width: 110px;height: 110px;background-color: red;float: left;margin-left: 10px;margin-top: 10px;"</span>&gt;&lt;/div&gt;</div><div class="line">&lt;/div&gt;</div></pre></td></tr></table></figure>
<p><a href="http://tomasyao.gitee.io/webstorm_ws/d9labNewAngularJs/yanshi.html" target="_blank" rel="external">演示地址</a></p>
<hr>

<p><strong>css选择器</strong></p>
<p><code>id选择器</code>,<code>类选择器</code>,<code>伪类</code></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">&lt;style&gt;</div><div class="line">    .divCss&#123;</div><div class="line">        width: 300px;</div><div class="line">        height: 200px;</div><div class="line">        border: 1px solid red;</div><div class="line">        padding: 20px;</div><div class="line">    &#125;</div><div class="line">    <span class="comment">#divId&#123;</span></div><div class="line">        width: 200px;</div><div class="line">        height: 100px;</div><div class="line">        border: 1px solid greenyellow;</div><div class="line">    &#125;</div><div class="line">&lt;/style&gt;</div><div class="line">&lt;div class=<span class="string">"divCss"</span>&gt;</div><div class="line">    &lt;div id=<span class="string">"divId"</span>&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">&lt;/div&gt;</div></pre></td></tr></table></figure>
<p><a href="http://tomasyao.gitee.io/webstorm_ws/d9labNewAngularJs/yanshi.html" target="_blank" rel="external">演示地址</a></p>
<hr>

<blockquote>
<p>JavaScript</p>
</blockquote>
<p>JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</p>
<p><code>控制交互 (人机交互，前后端交互)</code>，<code>操作dom</code>，<code>样式</code>，<code>ajax</code>，<code>链式调用</code></p>
<ul>
<li>定义变量,对象,函数<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line">var num = 1;</div><div class="line">var name = <span class="string">"zy"</span>;</div><div class="line">var user = &#123;</div><div class="line">    id: 1093,</div><div class="line">    username: <span class="string">"zy"</span>,</div><div class="line">    password: <span class="string">"123456"</span>,</div><div class="line">    getId: <span class="function"><span class="title">function</span></span>()&#123;</div><div class="line">        <span class="built_in">return</span> <span class="string">"user的id是: "</span>+this.id;</div><div class="line">    &#125;</div><div class="line">&#125;;</div><div class="line">var foo = <span class="keyword">function</span>(callback)&#123;</div><div class="line">    var i = 1;</div><div class="line">    <span class="keyword">for</span>(i;i&lt;5;i++)&#123;</div><div class="line">        //...</div><div class="line">    &#125;</div><div class="line">    <span class="built_in">return</span> callback(i);</div><div class="line">&#125;;</div><div class="line">var put = <span class="keyword">function</span>(p)&#123;</div><div class="line">    console.log(<span class="string">"i的值是: "</span>+p);</div><div class="line">&#125;;</div><div class="line">foo(put);</div><div class="line">console.log(user.getId());</div></pre></td></tr></table></figure>
</li>
</ul>
<script type="text/javascript">
    var num = 1;
var name = "zy";
var user = {
    id: 1093,
    username: "zy",
    password: "123456",
    getId: function(){
        return "user的id是: "+this.id;
    }
};
var foo = function(callback){
    var i = 1;
    for(i;i<5;i++){
        //...
    }
    return callback(i);
};
var put = function(p){
    console.log("i的值是: "+p);
};
foo(put);
console.log(user.getId());
</script>

<ul>
<li>作用域 没有块级作用域,只有函数级作用域<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">var faa = <span class="function"><span class="title">function</span></span>()&#123;</div><div class="line">    var a = 1;</div><div class="line">    <span class="keyword">for</span>(;a&lt;10;a++)&#123;</div><div class="line">        //..</div><div class="line">    &#125;  </div><div class="line">    console.log(a);</div><div class="line">&#125;;</div><div class="line">faa();</div></pre></td></tr></table></figure>
</li>
</ul>
<script type="text/javascript">
var faa = function(){
    for(var a = 1;a<10;a++){
        //..
    }  
    console.log(a);
};
faa();
</script>

<ul>
<li><p>操作dom,样式</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">var div = document.getElementById(<span class="string">"divId"</span>);</div><div class="line">console.log(div);</div><div class="line">div.onclick = <span class="function"><span class="title">function</span></span> () &#123;</div><div class="line">  <span class="keyword">if</span>(div.style.backgroundColor === <span class="string">"red"</span>)&#123;</div><div class="line">      div.style.backgroundColor = <span class="string">"green"</span>;</div><div class="line">  &#125;<span class="keyword">else</span> &#123;</div><div class="line">      div.style.backgroundColor = <span class="string">"red"</span>;</div><div class="line">  &#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
</li>
<li><p>ajax异步通信</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line">var Ajax=&#123;</div><div class="line">    get: <span class="keyword">function</span>(url, fn) &#123;</div><div class="line">        var obj = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据</div><div class="line">        obj.open(<span class="string">'GET'</span>, url, <span class="literal">true</span>);</div><div class="line">        obj.onreadystatechange = <span class="function"><span class="title">function</span></span>() &#123;</div><div class="line">            <span class="keyword">if</span> (obj.readyState == 4 &amp;&amp; obj.status == 200 || obj.status == 304) &#123; // readyState == 4说明请求已完成</div><div class="line">                fn.call(this, obj.responseText);  //从服务器获得数据</div><div class="line">            &#125;</div><div class="line">        &#125;;</div><div class="line">        obj.send();</div><div class="line">    &#125;,</div><div class="line">    post: <span class="keyword">function</span> (url, data, fn) &#123;         // datat应为<span class="string">'a=a1&amp;b=b1'</span>这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式</div><div class="line">        var obj = new XMLHttpRequest();</div><div class="line">        obj.open(<span class="string">"POST"</span>, url, <span class="literal">true</span>);</div><div class="line">        obj.setRequestHeader(<span class="string">"Content-type"</span>, <span class="string">"application/x-www-form-urlencoded"</span>);  // 添加http头，发送信息至服务器时内容编码类型</div><div class="line">        obj.onreadystatechange = <span class="function"><span class="title">function</span></span>() &#123;</div><div class="line">            <span class="keyword">if</span> (obj.readyState == 4 &amp;&amp; (obj.status == 200 || obj.status == 304)) &#123;  // 304未修改</div><div class="line">                fn.call(this, obj.responseText);</div><div class="line">            &#125;</div><div class="line">        &#125;;</div><div class="line">        obj.send(data);</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>链式调用 <code>谁是调用者,this就指向谁</code></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">var f = &#123;</div><div class="line">    v: 1,</div><div class="line">    m1: <span class="function"><span class="title">function</span></span>()&#123;</div><div class="line">        this.v += 1;</div><div class="line">        <span class="built_in">return</span> this;</div><div class="line">    &#125;,</div><div class="line">    m2: <span class="function"><span class="title">function</span></span>()&#123;</div><div class="line">        this.v += 2;</div><div class="line">        <span class="built_in">return</span> this;</div><div class="line">    &#125;,</div><div class="line">    m3: <span class="function"><span class="title">function</span></span>()&#123;</div><div class="line">        this.v += 3;</div><div class="line">        <span class="built_in">return</span> this;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">console.log(f.m1().m2().m3());</div></pre></td></tr></table></figure>
</li>
</ul>
<script type="text/javascript">
    var f = {
    v: 1,
    m1: function(){
        this.v += 1;
        return this;
    },
    m2: function(){
        this.v += 2;
        return this;
    },
    m3: function(){
        this.v += 3;
        return this;
    }
}
console.log(f.m1().m2().m3());
</script>

<blockquote>
<p>jquery</p>
</blockquote>
<p>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。</p>
<p><strong>Jquery选择器优化，样式,循环，$.ajax()</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line"><span class="comment">##对比</span></div><div class="line">documen.getElementById(<span class="string">"divId"</span>);</div><div class="line">$(<span class="string">"#divId"</span>);</div><div class="line">documen.getElementByClassName(<span class="string">"divCss"</span>);</div><div class="line">$(<span class="string">".divCss"</span>);</div><div class="line">$(<span class="string">"#inputId"</span>).attr(<span class="string">"title"</span>,<span class="string">"123"</span>);</div><div class="line">$(<span class="string">"#divCss"</span>).css(<span class="string">"color"</span>,<span class="string">"red"</span>);</div><div class="line">var list = [1,2,3,4,5];</div><div class="line"><span class="keyword">for</span>(var i=0,list;i&lt;list.length;i++)&#123;</div><div class="line">    //...</div><div class="line">&#125;</div><div class="line">$.each(list,<span class="keyword">function</span>(k,v)&#123;</div><div class="line">    //.</div><div class="line">&#125;);</div><div class="line">$.ajax(&#123;</div><div class="line">    url: ,</div><div class="line">    <span class="built_in">type</span>: <span class="string">''</span>,</div><div class="line">    dataType: <span class="string">''</span>,</div><div class="line">    data: &#123;</div><div class="line">          </div><div class="line">    &#125;,</div><div class="line">    success: <span class="function"><span class="title">function</span></span>()&#123;</div><div class="line">         </div><div class="line">    &#125;,</div><div class="line">    error: <span class="function"><span class="title">function</span></span>()&#123;</div><div class="line">          </div><div class="line">    &#125;</div><div class="line"> &#125;)</div></pre></td></tr></table></figure>
<h1 id="框架"><a href="#框架" class="headerlink" title="框架"></a>框架</h1><p><hr><br><strong>可复用组件，减少开发时间，提高开发效率，节省成本，提升产品质量。</strong></p>
<blockquote>
<p>Bootstrap </p>
</blockquote>
<p>Bootstrap：移动设备优先，浏览器支持，容易上手，响应式设计。</p>
<p><code>网格布局（12）</code>，<code>表单（输入标签，按钮）</code>，<code>表格</code>，<code>面板</code>，<code>导航</code>，<code>分页</code>，<code>进度条</code>，<code>模态框</code></p>
<ul>
<li>网格布局<br><em>Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列</em><br><img src="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_050.png" alt=""></li>
<li>表单元素<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div></pre></td><td class="code"><pre><div class="line">&lt;form class=<span class="string">"form-horizontal"</span> role=<span class="string">"form"</span>&gt;</div><div class="line">        &lt;div class=<span class="string">"form-group"</span>&gt;</div><div class="line">            &lt;label class=<span class="string">"col-sm-2 control-label"</span>&gt;用户名&lt;/label&gt;</div><div class="line">            &lt;div class=<span class="string">"col-sm-10"</span>&gt;</div><div class="line">                &lt;input <span class="built_in">type</span>=<span class="string">"text"</span> class=<span class="string">"form-control"</span> placeholder=<span class="string">"请输入用户名"</span>/&gt;</div><div class="line">            &lt;/div&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=<span class="string">"form-group"</span>&gt;</div><div class="line">            &lt;label class=<span class="string">"col-sm-2 control-label"</span>&gt;密码&lt;/label&gt;</div><div class="line">            &lt;div class=<span class="string">"col-sm-10"</span>&gt;</div><div class="line">                &lt;input <span class="built_in">type</span>=<span class="string">"password"</span> class=<span class="string">"form-control"</span> placeholder=<span class="string">"请输入密码"</span>/&gt;</div><div class="line">            &lt;/div&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=<span class="string">"form-group"</span>&gt;</div><div class="line">            &lt;label class=<span class="string">"col-sm-2 control-label"</span>&gt;性别&lt;/label&gt;</div><div class="line">            &lt;div class=<span class="string">"col-sm-10"</span>&gt;</div><div class="line">                &lt;label class=<span class="string">"radio-inline"</span>&gt;</div><div class="line">                    &lt;input <span class="built_in">type</span>=<span class="string">"radio"</span> name=<span class="string">"sexRadio"</span> value=<span class="string">"man"</span> checked&gt; 男</div><div class="line">                &lt;/label&gt;</div><div class="line">                &lt;label class=<span class="string">"radio-inline"</span>&gt;</div><div class="line">                    &lt;input <span class="built_in">type</span>=<span class="string">"radio"</span> name=<span class="string">"sexRadio"</span> value=<span class="string">"woman"</span>&gt; 女</div><div class="line">                &lt;/label&gt;</div><div class="line">            &lt;/div&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=<span class="string">"form-group"</span>&gt;</div><div class="line">            &lt;label class=<span class="string">"col-sm-2 control-label"</span>&gt;爱好&lt;/label&gt;</div><div class="line">            &lt;div class=<span class="string">"col-sm-10"</span>&gt;</div><div class="line">                &lt;select class=<span class="string">"form-control"</span>&gt;</div><div class="line">                    &lt;option&gt;篮球&lt;/option&gt;</div><div class="line">                    &lt;option&gt;足球&lt;/option&gt;</div><div class="line">                    &lt;option&gt;游戏&lt;/option&gt;</div><div class="line">                    &lt;option&gt;跑步&lt;/option&gt;</div><div class="line">                    &lt;option&gt;学习&lt;/option&gt;</div><div class="line">                &lt;/select&gt;</div><div class="line">            &lt;/div&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=<span class="string">"form-group"</span>&gt;</div><div class="line">            &lt;div class=<span class="string">"col-sm-offset-2 col-sm-10"</span>&gt;</div><div class="line">                &lt;div class=<span class="string">"checkbox"</span>&gt;</div><div class="line">                    &lt;label&gt;</div><div class="line">                        &lt;input <span class="built_in">type</span>=<span class="string">"checkbox"</span>&gt;请记住我</div><div class="line">                    &lt;/label&gt;</div><div class="line">                &lt;/div&gt;</div><div class="line">            &lt;/div&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div class=<span class="string">"form-group"</span>&gt;</div><div class="line">            &lt;div class=<span class="string">"col-sm-offset-2 col-sm-10"</span>&gt;</div><div class="line">                &lt;button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-default"</span>&gt;登录&lt;/button&gt;</div><div class="line">                &lt;button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-primary"</span>&gt;登录&lt;/button&gt;</div><div class="line">                &lt;button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-info"</span>&gt;登录&lt;/button&gt;</div><div class="line">                &lt;button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-danger"</span>&gt;登录&lt;/button&gt;</div><div class="line">                &lt;button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-warning"</span>&gt;登录&lt;/button&gt;</div><div class="line">            &lt;/div&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">    &lt;/form&gt;</div></pre></td></tr></table></figure>
</li>
</ul>
<p><a href="http://tomasyao.gitee.io/webstorm_ws/d9labNewAngularJs/yanshi.html" target="_blank" rel="external">演示地址</a></p>
<p><hr></p>
<ul>
<li><p>表格 面板 分页<br><img src="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_051.png" alt=""></p>
</li>
<li><p>模态框</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div></pre></td><td class="code"><pre><div class="line">&lt;div class=<span class="string">"modal fade"</span> data-backdrop=<span class="string">"static"</span> id=<span class="string">"&#123;&#123;modalId&#125;&#125;"</span> tabindex=<span class="string">"-1"</span> role=<span class="string">"dialog"</span>&gt;</div><div class="line">    &lt;!--单击背景时不关闭: data-backdrop=<span class="string">"static"</span>--&gt;</div><div class="line">    &lt;div class=<span class="string">"modal-dialog modal-lg"</span> role=<span class="string">"document"</span>&gt;</div><div class="line">        &lt;div class=<span class="string">"modal-content"</span>&gt;</div><div class="line">            &lt;div class=<span class="string">"modal-header"</span> style=<span class="string">"position: relative;"</span>&gt;</div><div class="line">                &lt;button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"close"</span> data-dismiss=<span class="string">"modal"</span>&gt;&lt;span&gt;&amp;<span class="built_in">times</span>;&lt;/span&gt;&lt;/button&gt;</div><div class="line">                &lt;h4 class=<span class="string">"modal-title"</span>&gt;&lt;span ng-bind=<span class="string">'title'</span>&gt;&lt;/span&gt;&lt;/h4&gt;</div><div class="line">                &lt;div class=<span class="string">"text-center"</span> style=<span class="string">"position: absolute;top: 15px;left: 0;width: 100%;"</span>&gt;</div><div class="line">                    &lt;span ng-show=<span class="string">"entity.modalTopAlertShow"</span> class=<span class="string">"alert alert-danger"</span></div><div class="line">                          style=<span class="string">"padding: 6px 10px;"</span>&gt;请将信息填写完整&lt;/span&gt;</div><div class="line">                &lt;/div&gt;</div><div class="line">            &lt;/div&gt;</div><div class="line">            &lt;div class=<span class="string">"modal-body form-horizontal"</span> ng-click=<span class="string">"modalBodyClick()"</span>&gt;</div><div class="line">                &lt;div ng-transclude=<span class="string">"body"</span>&gt;&lt;/div&gt;</div><div class="line">            &lt;/div&gt;</div><div class="line">            &lt;div class=<span class="string">"modal-footer"</span>&gt;</div><div class="line">                &lt;span ng-if=<span class="string">"action==='add' || action==='edit'"</span>&gt;</div><div class="line">                    &lt;button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-default"</span> data-dismiss=<span class="string">"modal"</span>&gt;关闭&lt;/button&gt;</div><div class="line">                    &lt;button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-success"</span> ng-click=<span class="string">'submit()'</span>&gt;</div><div class="line">                        &lt;span class=<span class="string">"icon-ok m-r"</span>&gt;&lt;/span&gt;&amp;nbsp;提交</div><div class="line">                    &lt;/button&gt;</div><div class="line">                &lt;/span&gt;</div><div class="line">                &lt;span ng-if=<span class="string">"action==='view'"</span>&gt;</div><div class="line">                    &lt;button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-default"</span> data-dismiss=<span class="string">"modal"</span>&gt;关闭&lt;/button&gt;</div><div class="line">                &lt;/span&gt;</div><div class="line">                &lt;span ng-transclude=<span class="string">"footer"</span>&gt;&lt;/span&gt;</div><div class="line">            &lt;/div&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">    &lt;/div&gt;</div><div class="line">&lt;/div&gt;</div></pre></td></tr></table></figure>
<p>  <img src="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_053.png" alt=""></p>
</li>
</ul>
<blockquote>
<p>Angularjs</p>
</blockquote>
<p>AngularJS[1]  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。</p>
<p>MVW (Model-View-Whatever)模式</p>
<p>指令:ng-app，ng-controller，ng-factory，ng-service，ng-provider，ng-init，ng-model，ng-bind，ng-show，ng-hide，ng-if，ng-repeat，ng-options，ng-bind-html</p>
<p><code>创建自定义的指令</code>： <code>.directive</code> 函数。使用驼峰法来命名一个指令， myDirective, 但在使用它时需要以 - 分割, my-directive。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div></pre></td><td class="code"><pre><div class="line">&lt;script&gt;</div><div class="line">    angular.module(<span class="string">"m"</span>,[])</div><div class="line">        .controller(<span class="string">"c"</span>,<span class="keyword">function</span> (<span class="variable">$scope</span>,myFactory) &#123;</div><div class="line">            <span class="variable">$scope</span>.entity = myFactory.getUser();</div><div class="line">            console.log(<span class="variable">$scope</span>.entity);</div><div class="line">            console.log(<span class="variable">$scope</span>.entity.getValue(<span class="string">"username"</span>));</div><div class="line">        &#125;)</div><div class="line">        .factory(<span class="string">"myFactory"</span>,<span class="function"><span class="title">function</span></span> () &#123;//.service .provider</div><div class="line">            <span class="built_in">return</span> &#123;</div><div class="line">                getUser: <span class="function"><span class="title">function</span></span> () &#123;</div><div class="line">                    var user = &#123;</div><div class="line">                        username: <span class="string">"zouy"</span>,</div><div class="line">                        password: <span class="string">"123456"</span>,</div><div class="line">                        age: 22,</div><div class="line">                        getValue: <span class="keyword">function</span> (v) &#123;</div><div class="line">                            <span class="built_in">return</span> this[v];</div><div class="line">                        &#125;</div><div class="line">                    &#125;;</div><div class="line">                    <span class="built_in">return</span> user;</div><div class="line">                &#125;</div><div class="line">            &#125;</div><div class="line">        &#125;)</div><div class="line">        .directive(<span class="string">"myDirective"</span>,<span class="function"><span class="title">function</span></span> () &#123;</div><div class="line">            <span class="built_in">return</span> &#123;</div><div class="line">                restrict: <span class="string">'AEC'</span>,//A:attribute E:element C:class</div><div class="line">                replace: <span class="literal">true</span>,</div><div class="line">                scope: &#123;</div><div class="line">                    entity: <span class="string">"="</span>, title: <span class="string">"@"</span>, name: <span class="string">"@"</span></div><div class="line">                &#125;,</div><div class="line">                template: <span class="string">'&lt;input class="" style="" type="text" ng-model="entity[name]"'</span> +</div><div class="line">                <span class="string">' ng-click="click()" ng-focus="focus()" ng-blur="blur()" /&gt;'</span>,</div><div class="line">                link: <span class="keyword">function</span> (scope) &#123;</div><div class="line">                    scope.click = <span class="function"><span class="title">function</span></span> () &#123;</div><div class="line">                        //...</div><div class="line">                    &#125;;</div><div class="line">                    scope.focus = <span class="function"><span class="title">function</span></span> () &#123;</div><div class="line">                        //...</div><div class="line">                    &#125;;</div><div class="line">                    scope.blur = <span class="function"><span class="title">function</span></span> () &#123;</div><div class="line">                        //...</div><div class="line">                    &#125;;</div><div class="line">                    //......</div><div class="line">                &#125;</div><div class="line">            &#125;</div><div class="line">        &#125;)</div><div class="line">&lt;/script&gt;</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">&lt;div ng-app=<span class="string">"m"</span> ng-controller=<span class="string">"c"</span> style=<span class="string">"margin-bottom: 20px;text-align: center;"</span>&gt;</div><div class="line">    &lt;div my-directive name=<span class="string">"username"</span> title=<span class="string">"用户名"</span> entity=<span class="string">"entity"</span>&gt;&lt;/div&gt;</div><div class="line">    &lt;div my-directive name=<span class="string">"password"</span> title=<span class="string">"密码"</span> entity=<span class="string">"entity"</span>&gt;&lt;/div&gt;</div><div class="line">    &lt;div my-directive name=<span class="string">"age"</span> title=<span class="string">"年龄"</span> entity=<span class="string">"entity"</span>&gt;&lt;/div&gt;</div><div class="line">    双向数据绑定:</div><div class="line">    &lt;input <span class="built_in">type</span>=<span class="string">"text"</span> ng-model=<span class="string">"entity.username"</span>&gt;</div><div class="line">    &lt;input <span class="built_in">type</span>=<span class="string">"text"</span> ng-model=<span class="string">"entity.password"</span>&gt;</div><div class="line">    &lt;input <span class="built_in">type</span>=<span class="string">"text"</span> ng-model=<span class="string">"entity.age"</span>&gt;</div><div class="line">&lt;/div&gt;</div></pre></td></tr></table></figure>
<script>
    angular.module("m",[])
        .controller("c",function ($scope,myFactory) {
            $scope.entity = myFactory.getUser();
            console.log($scope.entity);
            console.log($scope.entity.getValue("username"));
        })
        .factory("myFactory",function () {//.service .provider
            return {
                getUser: function () {
                    var user = {
                        username: "zouy",
                        password: "123456",
                        age: 22,
                        getValue: function (v) {
                            return this[v];
                        }
                    };
                    return user;
                }
            }
        })
        .directive("myDirective",function () {
            return {
                restrict: 'AEC',//A:attribute E:element C:class
                replace: true,
                scope: {
                    entity: "=", title: "@", name: "@"
                },
                template: '<input class="" style="" type="text" ng-model="entity[name]"' +
                ' ng-click="click()" ng-focus="focus()" ng-blur="blur()" />',
                link: function (scope) {
                    scope.click = function () {
                        //...
                    };
                    scope.focus = function () {
                        //...
                    };
                    scope.blur = function () {
                        //...
                    };
                    //......
                }
            }
        })
</script>

<div ng-app="m" ng-controller="c" style="margin-bottom: 20px;text-align: center;"><br>    <div my-directive="" name="username" title="用户名" entity="entity"></div><br>    <div my-directive="" name="password" title="密码" entity="entity"></div><br>    <div my-directive="" name="age" title="年龄" entity="entity"></div><br>    双向数据绑定:<br>    <input type="text" ng-model="entity.username"><br>    <input type="text" ng-model="entity.password"><br>    <input type="text" ng-model="entity.age"><br></div>

<p>应用: 表单,模态框等可重用组件</p>
<h1 id="js设计模式"><a href="#js设计模式" class="headerlink" title="js设计模式"></a>js设计模式</h1><p><hr><br><strong>设计模式</strong>是对软件设计中一些反复出现，普遍存在的问题所提出的解决方案。</p>
<p><code>单体模式</code>：单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果他可以被实例化，那么他只能被实例化一次。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">var Singleton = &#123;</div><div class="line">    attribute: <span class="literal">true</span>,</div><div class="line">    method1: <span class="function"><span class="title">function</span></span>()&#123;&#125;,</div><div class="line">    method2: <span class="function"><span class="title">function</span></span>()&#123;&#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<p><code>单例模式</code>：就是保证一个类只有一个实例。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">var single = (<span class="function"><span class="title">function</span></span>()&#123;</div><div class="line">    var unique;</div><div class="line"></div><div class="line">    <span class="keyword">function</span> <span class="function"><span class="title">getInstance</span></span>()&#123;</div><div class="line">　　　　// 如果该实例存在，则直接返回，否则就对其实例化</div><div class="line">        <span class="keyword">if</span>( unique === undefined )&#123;</div><div class="line">            unique = new Construct();</div><div class="line">        &#125;</div><div class="line">        <span class="built_in">return</span> unique;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    <span class="keyword">function</span> <span class="function"><span class="title">Construct</span></span>()&#123;</div><div class="line">        // ... 生成单例的构造函数的代码</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    <span class="built_in">return</span> &#123;</div><div class="line">        getInstance : getInstance</div><div class="line">    &#125;</div><div class="line">&#125;)();</div></pre></td></tr></table></figure></p>
<p><code>工厂模式</code>：提供创建对象的接口，意思就是根据领导（调用者）的指示（参数），生产相应的产品（对象）。<br>分为简单工厂模式和复杂工厂模式<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line">简单工厂模式：　var XMLHttpFactory =<span class="function"><span class="title">function</span></span>()&#123;&#125;;　　　　　　//这是一个简单工厂模式</div><div class="line">　　XMLHttpFactory.createXMLHttp =<span class="function"><span class="title">function</span></span>()&#123;</div><div class="line">　　　 var XMLHttp = null;</div><div class="line">　　　　<span class="keyword">if</span> (window.XMLHttpRequest)&#123;</div><div class="line">　　　　　　XMLHttp = new XMLHttpRequest()</div><div class="line">　　　 &#125;<span class="keyword">else</span> <span class="keyword">if</span> (window.ActiveXObject)&#123;</div><div class="line">　　　　　　XMLHttp = new ActiveXObject(<span class="string">"Microsoft.XMLHTTP"</span>)</div><div class="line">　　　　&#125;</div><div class="line">　　<span class="built_in">return</span> XMLHttp;</div><div class="line">　　&#125;</div><div class="line">　　//XMLHttpFactory.createXMLHttp()这个方法根据当前环境的具体情况返回一个XHR对象。</div><div class="line">　　var AjaxHander =<span class="function"><span class="title">function</span></span>()&#123;</div><div class="line">　　　　var XMLHttp = XMLHttpFactory.createXMLHttp();</div><div class="line">　　　　...</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h1 id="编码规范"><a href="#编码规范" class="headerlink" title="编码规范"></a>编码规范</h1><p><hr></p>
<blockquote>
<p>通用</p>
</blockquote>
<ul>
<li><strong>命名</strong>（变量，函数，文件，目录）</li>
<li><code>驼峰式</code>,<code>模块化</code>,<code>可读性</code><br><strong>ajaxModule</strong><br><strong>pageModule</strong><br><strong>entityModalView</strong><br><strong>userManage.jsp</strong><br><strong>util.js</strong><br><strong>main.css</strong><br><strong>login.css</strong><br><img src="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_054.png" alt=""></li>
</ul>
<blockquote>
<p>html</p>
</blockquote>
<ul>
<li><p>单标签 双标签 标签闭合<br><img src="http://pic.tomasyao.info/%E9%80%89%E5%8C%BA_055.png" alt=""></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">&lt;div&gt;&lt;/div&gt;</div><div class="line">&lt;span&gt;&lt;/span&gt;</div><div class="line">&lt;h3&gt;&lt;/h3&gt;</div><div class="line">&lt;input <span class="built_in">type</span>=<span class="string">""</span> name=<span class="string">""</span>/&gt;</div><div class="line">&lt;img src=<span class="string">""</span> alt=<span class="string">""</span>/&gt;</div></pre></td></tr></table></figure>
</li>
<li><p>style里每个属性用；做结尾，比如style=“position：absolute;top: 10px;left: 0;”</p>
</li>
</ul>
<blockquote>
<p>css</p>
</blockquote>
<ul>
<li>颜色十六进制，尽可能短例如使用 #fff 替代#ffffff，且尽量使用小写字母，以使在浏览文档时，它们能够更轻松的被区分开来。</li>
<li>不要为 0 指明单位，比如使用 margin: 0; 而不是 margin: 0px;。</li>
</ul>
<blockquote>
<p>JavaScript</p>
</blockquote>
<ul>
<li>不要声明全局变量，比如a = 1;应改为var a = 1;</li>
<li>声明之后一律以分号结束， 不可以省略;比var foo = function(){};var b = “str”;</li>
<li>尽量避免避免 ==和!= 的使用， 用严格比较条件 ===和!==</li>
</ul>
<h1 id="开源社区"><a href="#开源社区" class="headerlink" title="开源社区"></a>开源社区</h1><p><hr></p>
<ul>
<li>Github<br>  <a href="https://github.com/Tomasyao77/" target="_blank" rel="external">我的github</a></li>
<li>码云<br>  <a href="https://gitee.com/tomasyao/" target="_blank" rel="external">我的gitee</a></li>
<li>前端好的学习网站:<br><a href="https://www.imooc.com/" target="_blank" rel="external">慕课网</a><br><a href="http://www.runoob.com/" target="_blank" rel="external">菜鸟教程</a></li>
<li>技术工具<br><a href="http://tool.oschina.net/codeformat" target="_blank" rel="external">在线代码格式化</a><br><a href="http://momentjs.cn/" target="_blank" rel="external">js日期处理</a><br><a href="http://www.bootcss.com/p/chart.js/" target="_blank" rel="external">js图表</a></li>
</ul>
<blockquote>
<p>git Pull Request工作流程</p>
</blockquote>
<ul>
<li>fork项目,到网站上点击一下fork按钮，将项目复制到自己的工程中。</li>
<li>修改bug</li>
<li>发送一个Pull Request</li>
<li>原作者觉得可以就merge</li>
<li>一次协作完成</li>
</ul>
<p><img src="http://pic.tomasyao.info/thanks.jpg" alt=""></p>

      
    </div>
    
    
    
    
        <div>
        
    <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>


      </div>
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="http://pic.tomasyao.info/lALPACOG81QLSKnNBHDNAzw_828_1136.png_620x10000q90g.jpg" alt="tomasyao 微信支付"/>
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="http://pic.tomasyao.info/lADPACOG81QJkZHNBETNAtA_720_1092.jpg_620x10000q90g.jpg" alt="tomasyao 支付宝"/>
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/html/" rel="tag"><i class="fa fa-tag"></i> html</a>
          
            <a href="/tags/css/" rel="tag"><i class="fa fa-tag"></i> css</a>
          
            <a href="/tags/js/" rel="tag"><i class="fa fa-tag"></i> js</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/10/23/spring-framework学习笔记/" rel="next" title="spring framework学习笔记">
                <i class="fa fa-chevron-left"></i> spring framework学习笔记
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2018/01/25/aliyun服务器相关/" rel="prev" title="aliyun服务器相关">
                aliyun服务器相关 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="http://pic.tomasyao.info/avatar.png"
                alt="tomasyao" />
            
              <p class="site-author-name" itemprop="name">tomasyao</p>
              <p class="site-description motion-element" itemprop="description">D9lab</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives">
              
                  <span class="site-state-item-count">26</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">1</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">39</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          

          

          
          

          
          
            <div class="links-of-blogroll motion-element links-of-blogroll-inline">
              <div class="links-of-blogroll-title">
                <i class="fa  fa-fw fa-link"></i>
                Links
              </div>
              <ul class="links-of-blogroll-list">
                
                  <li class="links-of-blogroll-item">
                    <a href="http://www.uisdc.com/" title="优设" target="_blank">优设</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="http://www.zhangxinxu.com/" title="张鑫旭" target="_blank">张鑫旭</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="http://www.alloyteam.com/nav/" title="Web前端导航" target="_blank">Web前端导航</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="http://www.36zhen.com/t?id=3448" title="前端书籍资料" target="_blank">前端书籍资料</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="http://ife.baidu.com/" title="百度前端技术学院" target="_blank">百度前端技术学院</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="http://wf.uisdc.com/cn/" title="google前端开发基础" target="_blank">google前端开发基础</a>
                  </li>
                
              </ul>
            </div>
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#目录"><span class="nav-number">1.</span> <span class="nav-text">目录</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#基本语言"><span class="nav-number">2.</span> <span class="nav-text">基本语言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#框架"><span class="nav-number">3.</span> <span class="nav-text">框架</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#js设计模式"><span class="nav-number">4.</span> <span class="nav-text">js设计模式</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#编码规范"><span class="nav-number">5.</span> <span class="nav-text">编码规范</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#开源社区"><span class="nav-number">6.</span> <span class="nav-text">开源社区</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">tomasyao</span>

  
</div>


  <div class="powered-by">
  <i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
    本站访客数:<span id="busuanzi_value_site_uv"></span>
  </span>
  </div>



  <span class="post-meta-divider">|</span>



  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Mist</a> v5.1.4</div>





  <span class="post-meta-divider">|</span>



  <div class="theme-info">
    <div class="powered-by"></div>
    <span class="post-count">博客全站共16.8k字</span>
  </div>


        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/src/love.js"></script>
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"model":{"scale":1,"hHeadPos":0.5,"vHeadPos":0.618,"jsonPath":"/live2dw/assets/tororo.model.json"},"display":{"superSample":2,"width":80,"height":100,"position":"right","hOffset":30,"vOffset":10},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":1,"opacityOnHover":1},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
